<template>
  <div>
    <div class="flex items-center gap-4">
      <img :src="rightIcon" class="w-6 h-5" />
      泵机组停运
    </div>
    <div
      class="mt-4 w-[420px] h-[260px] bg-white rounded-lg shadow flex flex-col px-8 gap-8 py-8 box-border"
    >
      <div class="flex items-center gap-4">
        <span>停运时间</span>
        <el-input v-model="stopTime" class="!w-[160px]" />
        <span>小时</span>
      </div>
      <div class="flex items-center gap-4">
        <div class="flex items-center">
          <div class="cursor-pointer">
            <div @click="pumpShutdownSettingsVisible = !pumpShutdownSettingsVisible">
              <el-icon v-if="pumpShutdownSettingsVisible" class="mr-2">
                <ArrowDown />
              </el-icon>
              <el-icon v-else class="mr-2">
                <ArrowRight />
              </el-icon>
              <span>停运泵机组</span>
            </div>
            <!-- 设置内容 -->
            <div v-show="pumpShutdownSettingsVisible" class="mt-3 space-y-3">
              <div class="">
                <div class="mt-4 text-base w-[340px]">
                  <div class="flex h-[50px]">
                    <div
                      class="bg_table_header flex items-center justify-center border w-[120px] box-border"
                    >
                      泵站
                    </div>
                    <div
                      class="box-border flex items-center justify-center flex-1 bg_table_header topBorder bottomBorder rightBorder"
                    >
                      泵配置
                    </div>
                  </div>
                  <div class="flex h-[40px]">
                    <div
                      class="flex items-center justify-center rightBorder bottomBorder leftBorder2 w-[120px] box-border"
                    >
                      泵站1
                    </div>
                    <div class="flex items-center flex-1 px-5 rightBorder bottomBorder">
                      <div class="flex justify-between w-full">
                        <div><el-checkbox v-model="stopPump1">P-1</el-checkbox></div>
                        <div><el-checkbox v-model="stopPump2">P-2</el-checkbox></div>
                        <div><el-checkbox v-model="stopPump3">P-3</el-checkbox></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import rightIcon from '@/assets/images/rightIcon.png'
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
// 响应式数据
const stopTime = ref('2')
const stopPump1 = ref(false)
const stopPump2 = ref(true)
const stopPump3 = ref(true)
// 泵机组停运折叠控制
const pumpShutdownSettingsVisible = ref(false)

const validateSettings = () => {
  if (!stopTime.value) {
    ElMessage.error('停运时间不能为空')
    return
  }

  return true
}

const isFormValid = computed(() => {
  if (!stopTime.value) return false
  return true
})

const getParamsData = () => {
  return {
    Time_S: stopTime.value,
    PUMP1_S: stopPump1.value ? '1' : '0',
    PUMP2_S: stopPump2.value ? '1' : '0',
    PUMP3_S: stopPump3.value ? '1' : '0'
  }
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>

<style scoped></style>
